<template>
  <view class="container">
    <cu-custom bgColor="bg-blue" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">审批详情</block>
    </cu-custom>

    <view class="bg-top bg-blue">
      <view class="top-box shadow">
        <view class="cu-list menu">
          <view class="cu-item" style="padding: 0">
            <view class="content">
              <text class="cuIcon-newshotfill text-mauve margin-right-xs"></text>
              <text class="text-black">申请人</text>
            </view>
            <view class="action">
              <view class="cu-tag round bg-mauve light">{{ record.roleName }}</view>
            </view>
          </view>

          <view class="cu-item" style="padding: 0">
            <view class="content">
              <text class="cuIcon-writefill text-blue margin-right-xs"></text>
              <text class="text-black">申请内容</text>
            </view>
          </view>

          <view class="cu-item" style="padding: 0">
            <view class="action">
              <u-input
                type="textarea"
                style="width: 600rpx; word-break: break-all"
                :maxlength="500"
                class="text-sm u-font-28"
                v-model="record.content"
                disabled
                name="input"
              ></u-input>
            </view>
          </view>

          <view class="cu-item" style="padding: 0">
            <view class="content">
              <text class="cuIcon-timefill text-orange margin-right-xs"></text>
              <text class="text-black">申请时间</text>
            </view>
            <view class="action">
              <view @tap="timeShow = true" class="cu-tag round bg-orange light">{{ record.createTime }}</view>
            </view>
          </view>
        </view>
      </view>

      <view class="top-box shadow u-m-t-40">
        <view class="cu-list menu">
          <view class="cu-item" style="padding: 0">
            <view class="content">
              <text class="cuIcon-tagfill text-cyan margin-right-xs"></text>
              <text class="text-black">审批结果</text>
            </view>

            <view class="action">
              <u-subsection
                class="category-subsection"
                active-color="#1cbbb4"
                :list="categories"
                @change="changeCategory"
                :current="categoryIndex"
              ></u-subsection>
            </view>
          </view>

          <view class="cu-item" style="padding: 0">
            <view class="content">
              <text v-if="categoryIndex == 0" class="cuIcon-writefill text-green"></text>
              <text v-if="categoryIndex == 1" class="cuIcon-writefill text-red"></text>
              <text class="text-black">评论</text>
            </view>
          </view>

          <view class="cu-item" style="padding: 0">
            <view class="action">
              <u-input
                type="textarea"
                style="width: 600rpx; word-break: break-all"
                :maxlength="500"
                class="text-sm u-font-28"
                v-model="record.remark"
                :disabled="disabled"
                placeholder="请输入评论"
                name="input"
              ></u-input>
            </view>
          </view>
        </view>
      </view>

      <!-- 审批 -->
      <view
        v-if="disabled2"
        class="padding-lr flex margin-top-sm"
        style="justify-content: space-between; width: 750rpx"
      >
        <button class="submit" :style="[inputStyle]" @tap="submit" style="width: 100%">审批</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      record: {},
      categories: [
        {
          name: '通过',
          id: 1
        },
        {
          name: '不通过',
          id: 2
        }
      ],
      categoryIndex: 0,
      disabled: false,
      disabled2: false,
      confirmIndex: 0
    }
  },
  computed: {
    inputStyle() {
      let style = {}
      if (this.record.result && this.confirmIndex == 0) {
        style.color = '#fff'
        style.backgroundColor = this.$u.color['primary']
      }
      return style
    }
  },
  async onLoad(option) {
    this.getDetail(option.id)
  },
  methods: {
    async getDetail(id) {
      const res = await this.$u.api.getPermissionDetail(id)
      this.record = res

      if (res.result == 0) {
        // 未审批
        this.categoryIndex = 0
        this.disabled2 = true
        // 默认 通过
        this.record.result = 1
      } else if (res.result == 1) {
        // 通过
        this.categoryIndex = 0
        this.disabled = true
      } else {
        // 不通过
        this.categoryIndex = 1
        this.disabled = true
      }
    },
    /**
     * 审批结果选择
     */
    changeCategory(index) {
      this.categoryIndex = index
      this.record.result = this.categories[index].id
    },
    /**
     * 进行审批
     */
    async submit() {
      if (!this.record) return

      if (!this.record.result) {
        return
      }
      if (!this.confirmIndex == 0) {
        return
      }

      // 设置不能再次点击 2秒后恢复
      this.confirmIndex += 1
      setTimeout(() => {
        this.confirmIndex = 0
      }, 2000)

      this.record.parentRoleId = this.vuex_user.id
      const res = await this.$u.api.upPermissionRecord(this.record)
      this.$u.toast('审批成功，正在为您跳转审批记录列表')

      // 查询申请人信息
      let params = {
        id: this.record.roleId
      }
      const role = await this.$u.api.getRoleById(params)

      let cids = []
      cids.push(role.clientId)
      // 推送消息
      let title = '申请单回执'
      let content = '审批人 [' + this.vuex_user.realname + '] 已审批您的申请，请及时查看！'
      // await this.$u.utils.appPushInfo(cids, title, content);

      // 新增通知消息
      let params2 = {
        type: 1,
        title: title,
        content: content,
        roleId: this.record.roleId
      }
      await this.$u.api.addMessageNotification(params2)

      setTimeout(() => {
        uni.navigateBack({
          delta: 1,
          success: function () {
            uni.$emit('refreshPage')
          }
        })
      }, 1500)
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 750rpx;
  color: #333333;

  .bg-top {
    margin-top: -1rpx;
    width: 750rpx;
    height: 220rpx;
    padding-top: 50rpx;
    border-radius: 0 0 20% 20%;

    .top-box {
      width: 700rpx;
      background-color: #ffffff;
      margin: 0 auto;
      border-radius: 20rpx;
      padding: 20rpx 30rpx 0rpx;
      position: relative;

      .qh-title {
        width: 100%;
        height: 60rpx;
        line-height: 65rpx;
      }
    }
  }

  .submit {
    background-color: #ecf5ff;
    color: $u-tips-color;
    border: none;
    border-radius: 10px;
    font-size: 30rpx;

    &::after {
      border: none;
    }
  }
}

.category-subsection {
  width: 250rpx;
}

.input-width-220 {
  width: 220rpx;
}
</style>
